<template>
	<view>
		<page-head :transparent="false" class="yk">
			<slot slot="title">
				<view class="title-box"> {{ title.length > 10 ? title.substr(0, 10) + '...' : title }}</view>
			</slot>
			<slot slot="right">
				<view class="image-box">
					<image src="../../static/img/zhanye/btn.png" mode="aspectFill"></image>
				</view>
				<view class="image-box-btn">
					<view class="box-btn" @click="headBtn($event)"></view>
					<view class="box-btn" @click="closePage($event)"></view>
				</view>
			</slot>
		</page-head>
	</view>
</template>

<script>
	export default {
		props: {
			title: ''
		},
		methods: {
			headBtn(e) {
				this.$emit('headBtn', e);
				console.log(11);
				// uni.showActionSheet({
				// 	itemList: ['刷新', '清除缓存'],
				// 	success: function(res) {
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 		if (res.tapIndex == 0) {
				// 			//刷新
				// 			
				// 		} else {
				// 			//清楚缓存
				// 			callNative('onClearH5Cache')
				// 		}
				// 	},
				// 	fail: function(res) {
				// 		console.log(res.errMsg);
				// 	}
				// });
			},
			//关闭当前页面
			closePage(e) {
				this.$emit('closePage', e);
				// callNative('navigateBack')
			}
		}
	};
</script>

<style lang="scss">
	.title-box{
		padding-left: 134px;
	}
	.image-box {
		width: 174px !important;
		height: 64px !important;
		position: relative;
		top: -12px;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.image-box-btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -12px;
		right: 0;
		z-index: 10;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;

		.box-btn {
			width: 50%;
			height: 64px;
			display: flex;
			flex-wrap: wrap;
		}

		view {
			width: 50%;
			height: 64px;
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
